<div layout="column" ng-show="serverInfoloaded">
    <div flex="15"></div>
    <div flex layout="row">
        <div flex="10" flex-gt-sm="30"></div>
        <div flex layout="column" layout-align="space-around stretch">
            <div style="height: 30px;"></div>
            <form name="serverForm">
                <div layout="row" layout-align="center stretch" style="width: 100%;">
                    <md-select ng-model="server.type" style="width: 100%;" aria-label="type">
                        <md-option ng-value="'Shadowsocks'">Shadowsocks</md-option>
                        <md-option ng-value="'WireGuard'">WireGuard</md-option>
                        <md-option ng-value="'Trojan'">Trojan</md-option>
                    </md-select>
                </div>
                <md-input-container class="md-block">
                    <label translate>名称</label>
                    <input type="text" required name="name" ng-model="server.name">
                    <div ng-messages="serverForm.name.$error">
                        <div ng-message="required">名称不能为空</div>
                    </div>
                </md-input-container>
                <md-input-container class="md-block">
                    <label translate>备注</label>
                    <input type="text" required name="comment" ng-model="server.comment">
                </md-input-container>
                <md-input-container class="md-block">
                    <label translate>地址</label>
                    <input type="text" required name="address" ng-model="server.address">
                    <div ng-messages="serverForm.address.$error">
                        <div ng-message="required">地址不能为空</div>
                    </div>
                </md-input-container>
                <md-input-container class="md-block">
                    <label translate>端口</label>
                    <input type="text" required name="port" ng-model="server.port">
                    <div ng-messages="serverForm.port.$error">
                        <div ng-message="required">端口不能为空</div>
                    </div>
                </md-input-container>
                <md-input-container class="md-block">
                    <label translate>密码</label>
                    <input type="text" required name="password" ng-model="server.password">
                    <div ng-messages="serverForm.password.$error">
                        <div ng-message="required">密码不能为空</div>
                    </div>
                </md-input-container>
                <md-input-container class="md-block" ng-if="server.type === 'WireGuard'">
                    <label>Public key</label>
                    <input type="text" required name="publicKey" ng-model="server.key">
                </md-input-container>
                <md-input-container class="md-block" ng-if="server.type === 'WireGuard'">
                    <label translate>网段</label>
                    <input type="text" required name="net" ng-model="server.net">
                </md-input-container>
                <md-input-container class="md-block" ng-if="server.type === 'WireGuard'">
                    <label translate>WireGuard端口</label>
                    <input type="number" required name="wgPort" ng-model="server.wgPort">
                </md-input-container>
                <md-input-container class="md-block" ng-if="server.type === 'Trojan'">
                    <label>Trojan端口</label>
                    <input type="number" required name="tjPort" ng-model="server.tjPort">
                </md-input-container>
                <div ng-if="server.type === 'Shadowsocks'" class="md-block" layout="column" layout-align="center stretch" style="margin-bottom: 25px;">
                    <label flex style="color: rgba(0,0,0, 0.54); font-size: 13px;" translate>加密方式</label>
                    <md-autocomplete flex
                        md-selected-item="server.method"
                        md-items="method in methods"
                        md-item-text="method"
                        md-min-length="0"
                        md-search-text="methodSearch"
                        md-search-text-change="setMethod()"
                        md-require-match="false"
                        placeholder="请填写加密方式">
                        <md-item-template>
                            <span md-highlight-text="methodSearch" md-highlight-flags="^i">{{method}}</span>
                        </md-item-template>
                    </md-autocomplete>
                </div>
                <md-input-container class="md-block">
                    <label translate>流量倍率</label>
                    <input type="text" required name="scale" ng-model="server.scale">
                    <div ng-messages="serverForm.scale.$error">
                        <div ng-message="required" translate>流量倍率不能为空</div>
                    </div>
                </md-input-container>
                <md-input-container class="md-block" ng-if="server.type === 'Shadowsocks'">
                    <label translate>端口偏移</label>
                    <input type="number" required name="shift" ng-model="server.shift">
                    <div ng-messages="serverForm.shift.$error">
                        <div ng-message="required" translate>端口偏移量不能为空</div>
                    </div>
                </md-input-container>
                <md-input-container class="md-block">
                    <label translate>插件参数</label>
                    <input type="text" name="pluginOptions" ng-model="server.pluginOptions">
                </md-input-container>
                <div style="width: 100%;">
                    <md-chips ng-model="tags" placeholder="请输入标签">
                        <md-autocomplete
                            md-selected-item="tagsAutoComplete.selectedItem"
                            md-search-text="tagsAutoComplete.searchText"
                            md-items="item in tagsAutoComplete.querySearch(tagsAutoComplete.searchText)"
                            md-item-text="item"
                            placeholder="请输入标签"
                        >
                          <span md-highlight-text="tagsAutoComplete.searchText">{{item}}</span>
                        </md-autocomplete>
                        <md-chip-template>
                            <strong>{{$chip}}</strong>
                        </md-chip-template>
                    </md-chips>
                </div>
                <div style="width: 100%;" layout="row" layout-align="space-between center">
                    <div flex="75" translate>立即同步所有端口</div>
                    <div flex layout="row" layout-align="end center">
                        <md-switch ng-model="server.check" aria-label="check" ng-true-value="1" ng-false-value="0"></md-switch>
                    </div>
                </div>
            </form>
        </div>
        <div flex="10" flex-gt-sm="30"></div>
    </div>
    <div style="height: 50px;"></div>
    <div class="bottom-nav">
        <div flex layout="row" layout-align="center start">
            <div flex="10" flex-gt-sm="30"></div>
            <div layout="row" flex layout-align="space-around center">
                <md-button class="md-primary" ng-click="cancel()"><span translate>取消</span></md-button>
                <md-button class="md-warn" ng-click="deleteServer()" translate><span translate>删除</span></md-button>
                <md-button class="md-raised md-primary" ng-click="confirm()" translate><span translate>确认</span></md-button>
            </div>
            <div flex="10" flex-gt-sm="30"></div>
        </div>
    </div>
</div>
<div layout-fill layout="row" layout-align="center center" ng-show="!serverInfoloaded">
    <div flex style="height: 180px;"></div>
    <div flex layout="row" layout-align="center center">
        <md-progress-circular md-mode="indeterminate" class="md-accent"></md-progress-circular>
    </div>
    <div flex style="height: 180px;"></div>
</div>